import {FC} from "react"
import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
import { useHistory } from "umi";

interface ChildType {
    title: string;
    key: string;
    auth: string;
  }
  
  interface MenuType {
    title: string;
    key: string;
    icon: any;
    auth: string;
    children?: Array<ChildType>;
  }
const menuList: Array<MenuType> = [
    {
      title: '首页',
      key: '/admin/welcome',
      icon: <MailOutlined />,
      auth: '1',
    },
    {
      title: 'UI',
      key: '/admin/ui',
      icon: <AppstoreOutlined />,
      auth: '2',
      children: [
        {
          title: '按钮',
          key: '/admin/ui/buttons',
          auth: '12',
        },
        {
          title: '弹框',
          key: '/admin/ui/modals',
          auth: '13',
        },
        {
          title: 'Loading',
          key: '/admin/ui/loadings',
          auth: '14',
        },
        {
          title: '通知提醒',
          key: '/admin/ui/notification',
          auth: '15',
        },
        {
          title: '全局Message',
          key: '/admin/ui/messages',
          auth: '16',
        },
        {
          title: 'Tab页签',
          key: '/admin/ui/tabs',
          auth: '17',
        },
        {
          title: '图片画廊',
          key: '/admin/ui/gallery',
          auth: '18',
        },
        {
          title: '轮播图',
          key: '/admin/ui/carousel',
          auth: '19',
        },
      ],
    },
    {
      title: '表单',
      key: '/admin/form',
      icon: <AppstoreOutlined />,
      auth: '3',
      children: [
        {
          title: '登录',
          key: '/admin/form/login',
          auth: '20',
        },
        {
          title: '注册',
          key: '/admin/form/reg',
          auth: '21',
        },
      ],
    },
    {
      title: '表格',
      key: '/admin/table',
      icon: <AppstoreOutlined />,
      auth: '4',
      children: [
        {
          title: '基础表格',
          key: '/admin/table/basic',
          auth: '22',
        },
        {
          title: '高级表格',
          key: '/admin/table/high',
          auth: '23',
        },
      ],
    },
    {
      title: '富文本',
      key: '/admin/rich',
      icon: <AppstoreOutlined />,
      auth: '5',
    },
    {
      title: '城市管理',
      key: '/admin/city',
      icon: <AppstoreOutlined />,
      auth: '6',
    },
    {
      title: '订单管理',
      key: '/admin/order',
      icon: <AppstoreOutlined />,
      auth: '7',
      children: [
        {
          title: '订单详情',
          key: '/admin/order/detail',
          auth: '24',
        },
        {
          title: '结束订单',
          key: '/admin/order/finish',
          auth: '25',
        },
      ],
    },
    {
      title: '员工管理',
      key: '/admin/user',
      icon: <AppstoreOutlined />,
      auth: '8',
    },
    {
      title: '车辆地图',
      key: '/admin/bikeMap',
      icon: <AppstoreOutlined />,
      auth: '9',
    },
    {
      title: '图标',
      key: '/admin/charts',
      icon: <AppstoreOutlined />,
      auth: '10',
    },
    {
      title: '权限设置',
      key: '/admin/permission',
      icon: <MailOutlined />,
      auth: '11',
    },
  ];

const { SubMenu } = Menu;
const Mymenu:FC=()=>{
    const history =useHistory()
    const handleClick=(e:any):void=>{
        console.log('click',e)
        
        history.push(e.key)
    }
   return(
       <>
    <Menu onClick={handleClick} mode="vertical" theme="dark">
    {menuList.map(item=>{
        if(item.children){
            return  ( <SubMenu key={item.key} icon={item.icon} title={item.title}>
                    {item.children?.map(item=>
                        <Menu.Item key={item.key}  title={item.title}>{item.title}</Menu.Item>
                    )}
                    </SubMenu>)
        }else{
           return (<Menu.Item key={item.key} icon={item.icon} title={item.title}>{item.title}</Menu.Item>)
        }
     
    })}

  </Menu>,
       </>
   )
}
export default Mymenu